<template>
  <!--左侧导航-->
  <aside class="showSidebar" v-if="routerArr && routerArr.length >0">
    <el-menu :default-active="curPath" class="el-menu-vertical-demo" @select="handleSelect">
      <template v-for="item  in this.$router.options.routes">
        <template v-for="(child,index) in item.children">
          <el-menu-item :index="child.path" :key="child.name+index" v-if="child.menu">
            <template slot="title">
              <i :class="`${'iconfont '+child.iconCls}`"></i>
              <span slot="title">{{child.name}}</span>
            </template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </aside>
</template>
<script>
import { isExternal } from 'util/validate'

export default {
  name: 'leftNav',
  data () {
    return {
      routerArr: []
    }
  },
  computed: {
    // 当前路由
    curPath () {
      let url = ''
      let cur = this.$route.path // 当前路由
      let index = cur.lastIndexOf('/')
      let sub = cur.substring(cur, index)
      // 判断路由层级截取路由，目的为了进入详情时高亮选中菜单
      if (sub) {
        url = sub
      } else {
        url = cur
      }
      return url
    }
  },
  watch: {
    '$route': function (to, from) {
      // 路由改变时执行
      this.$nextTick(() => {
        this.initRouter()
      })
    }
  },
  mounted () {
    this.initRouter()
  },
  methods: {
    // 初始化路由
    initRouter () {
      this.routerArr = this.$router.options.routes
    },
    // 判断是否有外部链接
    handleSelect (routePath) {
      if (isExternal(routePath)) {
        window.open(routePath, '_blank')
        return false
      } else {
        this.$router.push(routePath)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.hamburger {
  display: inline-block;
  cursor: pointer;
  transform: rotate(180deg);
  transition: 0.38s;
  transform-origin: 50% 50%;
  font-size: 18px;
  font-weight: bold;
}
.hamburger.is-active {
  transform: rotate(0deg);
}
</style>
